<template>
    <!-- 引用 panel.vue 的模板 -->
    <panel class="panel"   title="理财精选" >        
        <section class="content">
               <dl class="item3" v-for="item in items " :key="item.title">
                    <dt>{{item.title}} <span>{{item.title1}}</span> </dt>
                    <dd class="middles">{{item.middles}}</dd>
                    <dd class="foots">{{item.foots}}</dd>
               </dl>
        </section>
         
        
    </panel>

</template>

<style lang="scss" module >  //!!!!!!module   写完之后 才能 使用 :class="$style.panel"   class="panel"
  
  @import "../css/element.scss" ; 
  //@import "../css/11.scss" ;

  
                            .item3{
                                   width: 50%;
                                   float:left;
                                   box-sizing: border-box ;
                                   //text-align: center;
                                   padding-left: 12px;   
                                   .middles{
                                        font-size: 25px;
                                        color:red ;
                                   };
                                dt{
                                    color: black;
                                    span{
                                        color: rgba(255, 0, 0, 0.616) ;
                                        border: 0.5px solid rgba(255, 0, 0, 0.705) ;
                                        padding:  0 3px;
                                        vertical-align: 1px;
                                        margin-left:2px ;

                                    };
                                } ;
                            }

     .panel{
                @include  panel ;
         
                .content{
                    @include flex(row) ;
                     justify-content: space-around;

                          
                   
                }
        }

</style>




<script>
 import panel from  '../smallzj/panel.vue'    //引入panel.vue 组件模板
export default {
    data(){
         return{

             items:[
                 {
                 title:"定期理财",
                 title1:"理财首选",
                 middles:"5.60%",
                 foots:"历史年化报利率"
                 },
                 {
                 title:"小白理财",
                  title1:"理财首选",
                 middles:"4.22%",
                 foots:"7日年化收益率"
                 },
                 {
                 title:"月月盈利",
                  title1:"养老保障",
                 middles:"5.31%",
                 foots:"7日年化收益率"
                 },
                 {
                 title:"小白基金",
                  title1:"天天赚钱",
                 middles:"4.27%",
                 foots:"7日年化收益率"
                 },
               

             ]
             
         }
    },
    components:{
        panel ,

    }
}
</script>
